import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './Recommend.css';

const recommendList = [
  { id: 1,img: 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650' },
  { id: 2, img: 'https://img95.699pic.com/photo/40244/2615.jpg_wh860.jpg' },
  { id: 3,img: 'https://ts1.tc.mm.bing.net/th/id/R-C.1b435f71fa97e9cbc1f82b52747b6a7b?rik=aPJw02uioAA9wA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50035%2f5244.jpg_wh1200.jpg&ehk=BCOf1MU04EB9B34FzIn0bZAsVBcqZeVGr1zO4zoDyv4%3d&risl=&pid=ImgRaw&r=0' },
  { id: 4, img: 'https://tse2-mm.cn.bing.net/th?id=OIF-C.zbrlPPFjaJSPF7iJiYph%2fw&rs=1&pid=ImgDetMain&o=7&rm=3' },
  { id: 5, img: 'https://cdn.pixabay.com/photo/2024/04/15/21/21/dusk-8698720_1280.jpg' },
  { id: 6,img: 'https://www.keaitupian.cn/cjpic/frombd/0/253/2671878049/2123263829.jpg' },
  { id: 7,img: 'https://img.shetu66.com/2023/03/27/1679920836444924.jpg' },
  { id: 8, img: 'https://pic.616pic.com/ys_bnew_img/00/60/24/0Nz8tuNbbb.jpg' },
  { id: 9, img: 'https://pic.616pic.com/ys_bnew_img/00/47/45/WwJs1U7BJW.jpg' },
];

const PAGE_SIZE = 7;

const Recommend: React.FC = () => {
  const [page, setPage] = useState(0);
  const [showArrows, setShowArrows] = useState(false);
  const total = recommendList.length;
  const maxPage = Math.ceil(total / PAGE_SIZE) - 1;
  const navigate = useNavigate();

  const showList = recommendList.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE);

  const prev = () => setPage((prev) => (prev - 1 < 0 ? 0 : prev - 1));
  const next = () => setPage((prev) => (prev + 1 > maxPage ? maxPage : prev + 1));

  return (
    <section className="recommend-section single">
      <div className="recommend-header">
        <h2 className="recommend-title">推荐的部分</h2>
        <button className="recommend-more" onClick={() => navigate('/template')}>更多 &gt;</button>
      </div>
      <div
        className="recommend-carousel-wrapper"
        onMouseEnter={() => setShowArrows(true)}
        onMouseLeave={() => setShowArrows(false)}
      >
        {showArrows && page > 0 && (
          <button className="recommend-arrow left" onClick={prev}>&lt;</button>
        )}
        <div className="recommend-carousel multi">
          {showList.map(item => (
            <div className="recommend-card multi" key={item.id}>
              <img className="recommend-img" src={item.img} alt='' />
              <div className="recommend-info multi">
                {/* <div className="recommend-card-title">{item.title}</div> */}
              </div>
            </div>
          ))}
        </div>
        {showArrows && page < maxPage && (
          <button className="recommend-arrow right" onClick={next}>&gt;</button>
        )}
      </div>
  
    
    </section>
  );
};

export default Recommend; 